<template>
  <div class="classify">
    <!-- <van-head></van-head> -->
      <form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
 
    @click="gotoWhere({name:'search'})"
  />
</form>
    <div class="list-box">
      <div class="bleft">
        <van-sidebar v-model="active">
          <van-sidebar-item
            class="tleft"
            v-for="(l, i) in types"
            :key="i"
            :title="l.text"
            :name="i"
          />
        </van-sidebar>
      </div>
      <div class="bright">
        <clist
          :goods="
            goods.filter((item) => item.type.value == types[active].value)
          "
        ></clist>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      value:"",
      types: [],
      goods: [],
    };
  },
  methods: {
    async findGoods() {
      let res = await this.$ajax.findGoods();
      var obj = {};
      this.goods = res;
      for (var i = 0; i < res.length; i++) {
        var item = res[i];
        if (!obj[item.type.text]) {
          obj[item.type.text] = item.type.text;
          this.types.push(item.type);
        }
      }
    }
 
  },
  mounted() {
    this.findGoods();
  },
};
</script>

<style lang="scss" scoped>
.classify {
  width: 100%;
  .list-box {
    display: flex;
    height: calc(100vh - 100px);
    overflow: hidden;
    .bleft {
      flex-shrink: 0;
    }
    .bright {
      flex: 1;
      overflow: auto;
    }
  }
}
</style>